<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>组件使用中的细节点</title>
	<script src="js/vue.js"></script>
</head>

<body>
	<div id="root">   <!-- is的使用 -->
		<table>
			<tbody>
				<tr is="row"></tr>	
				<tr is="row"></tr>	
				<tr is="row"></tr>	
			</tbody>
		</table>	
	</div>
	
	
	<div id="ref_demo"><!-- ref的使用 -->
		<div ref='hello' @click="handleClick">Hello Vue->Ref</div>
	</div>
	
	<div id="number_app">
		<counter ref="one" @yhn_change="yhn_change"></counter>
		<counter ref="two" @yhn_change="yhn_change"></counter>
		<div>total: {{total}}</div>
	</div>
</body>
	<script>
		Vue.component('row',{
			data: function(){
				return{
					content: "this is return Data"
				}
			},
			template: "<tr><td>{{content}}</td></tr>"
		})
		var vm = new Vue({
			el: "#root"
		})
		
		
		var vm2 = new Vue({
			el: "#ref_demo",
			methods: {
				handleClick: function(){
					console.log(this.$refs.hello.innerHTML);
				}
			}
		})
		Vue.component("counter",{
			template: "<div @click='add_number'>{{number}}</div>",
			data: function(){
				return {
					number: 0
				}
			},
			methods: {
				add_number: function(){
					this.number++;
					this.$emit("yhn_change");
				}
			}
		})
		var number_app = new Vue({
			el: "#number_app",
			data: {
				total: 0,
			},
			methods: {
				yhn_change: function(){
					this.total = this.$refs.one.number+this.$refs.two.number;
				}
			}
		})
	</script>
</html>
